<!--
 * @Descripttion:
 * @Author: zhengminjie
 * @Date: 2021-04-05 13:23:43
 * @LastEditors: zhengminjie
 * @LastEditTime: 2021-04-05 16:08:14
-->
<template>
  <div class="app-container">
    <el-form :model="groupManager" ref="groupForm" v-show="showSearch" :inline="true">
      <el-form-item label="群号" prop="groupNum">
        <el-input
          v-model="groupManager.groupNum"
          placeholder="请输入群号"
          clearable
          style="width:240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="群昵称" prop="groupName">
        <el-input
          v-model="groupManager.groupName"
          placeholder="请输入群昵称"
          clearable
          style="width:240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-col :span="1.5">
          <el-button 
            type="primary" 
            plain
            size="mini"
            icon="el-icon-search"
            @click="getList"
          >搜索群组</el-button>
        </el-col>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button 
          type="primary" 
          plain
          size="mini"
          icon="el-icon-circle-plus"
          @click="creategroup=true"
        >创建群组</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button 
          type="success" 
          plain
          size="mini"
          icon="el-icon-edit"
          @click="addgroup=true"
        >添加群组</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-popover
          placement="top"
          width="160"
          v-model="deletegroup">
          <p>你确定要退出该群组嘛？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="deletegroup = false">取消</el-button>
            <el-button size="mini" type="text" @click="DeleteGroup">确定</el-button>
          </div>
          <el-button 
            type="danger" 
            plain
            size="mini"
            icon="el-icon-delete"
            slot="reference"
            :disabled="multiple"
          >退出群组</el-button>
        </el-popover>
      </el-col>
      <right-toolbar  :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

  <!-- 表格 -->
    <el-table v-loading="loading" :data="groupManagerList" @selection-change="handleSelectionChange">
      <el-table-column	type="selection"  width="55" align="center" />
      <el-table-column	prop="groupId"  label="群组ID"  align="center" v-if="false" />
      <el-table-column  prop="groupNum"	label="群号"  align="center" :show-overflow-tooltip="true" />
      <el-table-column	prop="groupName" label="群昵称"  align="center" :show-overflow-tooltip="true" />
      <el-table-column	prop="userNumber"  label="用户身份编号"  align="center" v-if="false" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="未绑定身份信息的看不了该群的数据信息哟" placement="top-start">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              :disabled="!!scope.row.userNumber"
              @click="bandRow(scope.row)"
              >绑定</el-button>
            </el-tooltip>
            <el-popconfirm
              title="你确定要退出该群组嘛?"
              @confirm ="DeleteGroup(scope.row)"
              >
              <el-button 
                style="color:red"
                type="text" 
                size="mini"
                icon="el-icon-delete"
                slot="reference"
              >退出</el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="我创建的" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="managerBy" label="我管理的" align="center" :show-overflow-tooltip="true" />
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="groupManager.pageNum"
      :limit.sync="groupManager.pageSize"
    />

    <!-- 创建群组对话框 -->
    <el-dialog title="创建群组" :visible.sync="creategroup">
      <el-form :model="createForm">
        <el-form-item label="设置群昵称">
          <el-input 
            v-model="createForm.groupName" 
            style="width:200px" 
            placeholder="输入群昵称" 
            clearable 
            maxlength="10"
            ></el-input>
        </el-form-item>
        <el-form-item label="设置加群限制">
          <el-radio-group v-model="createForm.limited">
            <el-radio label="需要管理员同意"></el-radio>
            <el-radio label="直接进群"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="CreateGroup">创 建</el-button>
          <el-button @click="creategroup = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加群组对话框 -->
    <el-dialog title="添加群组" :visible.sync="addgroup">
      <el-form :model="addForm">
        <el-form-item label="群昵称" label-width="70px">
          <el-input v-model="addForm.groupName" style="width:300px" placeholder="输入群昵称" clearable></el-input>
        </el-form-item>
        <el-form-item label="群号" label-width="70px">
          <el-input 
            v-model="addForm.groupNum" 
            clearable
            style="width:300px" 
            placeholder="输入群号"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          <el-tooltip content="记得选择下面表格中的群组" placement="top">
            <el-button 
              style="margin-left:20px"
              type="primary" 
              plain
              size="small"
              icon="el-icon-search"
              @click="SearchAllGroup"
            >搜索</el-button>
          </el-tooltip>
        </el-form-item>
        <el-table v-loading="loading" :data="allGroupManagerList" style="margin-bottom:20px" @selection-change="SelectionChange">
          <el-table-column	type="selection"  width="55" align="center" />
          <el-table-column  prop="groupNum"	label="群号"  align="center" :show-overflow-tooltip="true" />
          <el-table-column	prop="groupName" label="群昵称"  align="center" :show-overflow-tooltip="true" />
        </el-table>
        <el-form-item label="加群内容" label-width="70px">
          <el-input v-model="addForm.groupMessage" type="textarea" style="width:300px" placeholder="输入加群信息"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-tooltip content="最好填一下为什么加群哟！" placement="top">
            <el-button type="primary" @click="AddGroup">添 加</el-button>
          </el-tooltip>
          <el-button @click="addgroup = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 绑定按钮对话框 -->
    <el-dialog title="绑定身份信息" :visible.sync="band">
      <el-form :model="bandForm">
        <el-form-item label="设置群昵称" label-width="100px">
          <el-input v-model="bandForm.groupUserName" style="width:200px" placeholder="输入你在该群的昵称"></el-input>
        </el-form-item>
        <el-form-item label="设置身份编号" label-width="100px">
          <el-input v-model="bandForm.userNumber" style="width:200px" placeholder="输入身份编号(eg:学号)"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="handBand">确 定</el-button>
          <el-button @click="band = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>   
</template>

<script>

import {createGroup, searchAllGroup, searchGroup, addGroup, deleteGroup, bandIdentity } from '@/api/distribution/groupManager'

export default {
    name: "GroupManager",
    data(){
      return{
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 添加按钮选中的数组
        addId:[],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 创建群组对话框
        creategroup:false,
        createForm:{
          groupName:"",
          limited:"需要管理员同意"
        },
        // 添加群组对话框
        addgroup:false,
        addForm:{
          groupNum:"",
          groupName:"",
          limited:"需要管理员同意"
        },
        // 删除按钮
        deletegroup:false,
        // 绑定按钮
        band:false,
        bandForm:{},
        // 表格数据
        groupManagerList:[],
        allGroupManagerList:[],
        // 总条数
        total: 0,
        //查询参数
        groupManager:{
            groupNum:"",
            groupName:"",
            pageNum:1,
            pageSize:10,
        }
      }
    },
    created(){
      this.getList();
    },
    methods:{
      /** 刷新列表 */
      getList(){
        this.loading = true;
        searchGroup(this.groupManager.groupNum,this.groupManager.groupName).then(res=>{
          console.log(res);
          this.groupManagerList = res.rows;
          let i = 0;
            res.rows.forEach(item=>{
              if(item.userIdentity == "创建者"){
                this.groupManagerList[i].createBy = "是";
                this.groupManagerList[i].managerBy = "是";
              }
              else if(item.userIdentity == "管理员"){
                this.groupManagerList[i].createBy = "否";
                this.groupManagerList[i].managerBy = "是";
              }
              else{
                this.groupManagerList[i].createBy = "否";
                this.groupManagerList[i].managerBy = "否";
              }
              i++;
            })
            this.loading = false;
          }
        );
        this.groupManager.pageNum = 1;
      },
      /** 创建群组 */
      CreateGroup(){
        if(this.createForm.groupName == ""){
           this.$message({
            message: '请设置群昵称哟！',
            type: 'warning'
          });
        }
        else if(this.createForm.groupName.substring(0,1)==" "){
          this.$message({
            message:'开头不能输入空格哟！',
            type:'warning'
          })
          this.createForm.groupName="";
        }
        else{
          let create = {};
          create.groupName = this.createForm.groupName;
          if(this.createForm.limited == "需要管理员同意"){
            create.groupPermission = 1;
          }
          else{
            create.groupPermission = 0;
          }
          createGroup(create).then(
            response=>{
              this.msgSuccess("创建成功");
              this.getList();
              this.creategroup = false;
              this.createForm.groupName="";
          });
        }
      },
      /** 添加群组 */
      AddGroup(){
        if(this.addId.length==0){
          this.$message({
            message:'要选择表格中的群组哟！',
            type:'warning'
          })
        }
        else{
          let message = {};
          message.messageType = 1;
          message.messageContent = "有新成员加入";
          message.content = this.addForm.groupMessage;
          message.groupNum = this.addId;
          console.log(message);
          addGroup(message).then(res=>{
            console.log(res);
            this.getList();
            this.addgroup = false;
            this.addForm.groupName = "";
            this.addForm.groupNum = "";
            this.allGroupManagerList = [];
          })
        }
      },
      SelectionChange(selection){
        this.addId = selection.map(item => item.groupNum);
      },
      /** 添加群组的搜索按钮 */
      SearchAllGroup(){
        searchAllGroup(this.addForm.groupNum,this.addForm.groupName).then(res=>{
          this.allGroupManagerList = res.rows;
        })
      },
      /** 删除群组 */
      DeleteGroup(rows){
        let groupNum = [];
        if(rows.groupNum == undefined){
          groupNum = this.ids;
        }
        else{
          groupNum[0] = rows.groupNum;
        }
        console.log(groupNum);
        deleteGroup(groupNum).then(res=>{
          console.log(res);
          this.getList();
          this.deletegroup = false;
        })
      },
      /** 绑定身份信息 */
      bandRow(rows){
        this.bandForm = {};
        this.bandForm.groupId = rows.groupId;
        this.band = true;
      },
      handBand(){
        bandIdentity(this.bandForm).then(res=>{
          console.log(res);
          if(res.msg == "绑定身份信息失败"){
            this.$message({
              showClose: true,
              message: '身份信息与群内用户重复,绑定身份信息失败',
              type: 'error'
            })
          }
          else{
            this.$message({
              showClose: true,
              message: '绑定的身份信息无法更改,绑定身份信息成功',
              type: 'success'
            })
            this.band = false;
            this.bandForm = {};
          }
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.groupNum)
        this.multiple = !selection.length
      },
    }
}
</script>